<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>Ajax长轮询 >> Java就是老大</title>
<meta name="keywords" content="Java,J2EE,Javascript,CSS,HTML" />
<meta name="description" content="	Ajax长轮询推送, web推送" />
<meta name="Robots" content= "all">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link href="/style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/plus.js"></script>
</head>
<body>
<div id="logo">
	<img src="/images/logo.png" alt="Logo">
	<h1>wind's page</h1>
	<p><em> a zone 4 a coder </em></p>
</div>
<div id="header">
	<div id="menu">
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/resume.html">Resume</a></li>
			<li><a href="/gallery.html">Gallery</a></li>
            <li><a href="/demo.html" class='current'>Demo</a></li>
			<li><a href="/other.html">Other</a></li>
		</ul>
	</div>
    <div id="search">
    	<g:plusone href="http://www.aceyo.com" size="medium"></g:plusone><br />
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=562747059&site=qq&menu=yes"><img border="0" width="59" height="16" src="http://wpa.qq.com/pa?p=2:562747059:46" alt="企鹅号" title="企鹅号"></a>
	</div>
</div>
<div id="page">
	<b>Ajax长轮询推送, web推送.</b>
	<div style="width:860px;height:540px;border:1px dashed #4999CB;margin:10px 0;padding:10px;">
		<img src='/images/long.png' width='691' height='534' />
	</div>
	<a href="javascript:void(0)" class="button red medium" onclick="$('textarea').select();">复制代码</a>
	<textarea readonly style="width:880px;height:430px;border:1px dashed #4999CB;">
	// jquery 部分
	$(function(){
		longPolling();
	});
	//长轮询
	function longPolling(){
	var myDate = new Date();
		$.ajax({
			type: "get",
			url: "/longPolling/servlet/Pollservlet", 
			timeout:10000, 						//6秒超时
			data: "para="+$('#cont').val(),
			success: function(data,status){
					//从服务器得到数据，显示数据并继续查询      
					if(data){      
						$("#msg").append("<br>"+status +"[有数据] <b>"+data +"</b>  "+myDate.getSeconds() );
			}
					else{
						$("#msg").append("<br>[无数据]"); 
					}
					longPolling();
			 },
			error:function(XMLHttpRequest,status,errorThrown){
			 if(status=="timeout"){      
				 $("#msg").append("<br>[超时了]");      
				  longPolling();   
			 }
		  }
		});
	}

	// html 部分
	<h2>ajax 长轮询的简单Demo,写的简陋,只为效果.</h2>
	默认服务器3秒推送一次数据(根据后台数据更新条件),10秒超时重新获取数据(实际境况应该更大).<br />
	前台往后台传的数据只为了看出阻断超时的效果.firebug下看效果.<br /><br />
	<input type="text" id="cont" />填写stop,就超时,空为没数据.
	<div id="msg"></div>

	// servlet 部分
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String str = request.getParameter("para");
		try {
			if (str.equals("stop")) {		//发送stop,就超时(这地方写阻断方法)
				Thread.sleep(10000L);
			}else {
				Thread.sleep(3000L);
			}
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		response.setContentType("text/plain");
		PrintWriter out = response.getWriter();
		out.print(str);
		out.flush();
		out.close();
	}
	</textarea>
</div>
<div id="footer">
	<p>Copyright (c) 2011 Aceyo.com. All rights reserved. <br /><img src="http://new.cnzz.com/v1/images/icon/icon.gif" border="0"> <script src="http://s23.cnzz.com/stat.php?id=3684523&web_id=3684523&online=1&show=line"></script></p>
</div>
</body>
</html>